<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=<device-width>, initial-scale=1.0">
    <title>Document</title>
    <style>
      label{
        display: inline-block;
        width:80px;
        text-align: right;
      }
         .total {
        border: 1px solid black;
        width: 500px;
        margin: auto;
        /* 表格居中 */
      }
      .gcode {
        width: 50px;
        height: 20px;
        background: url(images/布纹.jpg);
        /* 验证码的背景 */
        background-size: 100%;
        text-align: center;
        font-size: 10pt;
        letter-spacing: 2px;
        font-style: italic;
        opacity: 0.6;
        cursor: pointer;
        margin: 4px;
        user-select: none;
        /* 验证码不能被鼠标选中 */
      }
        .img1 {
        width: 20px;
        position: relative;
        top: 4px;
      }
      .myintro{
        position: relative;
        bottom: 70px;
      }
    </style>
</head>
<body>
    <form action="data.html" method="get" class="total">
    <p><span style="color: blue;">欢迎注册会员</span></p>
    <label for="tel">手机号码:</label>
        <input type="text" name="tel" placeholder="11位手机号"><span style="color: red;">必填</span>
        <br>
        <label for="psw">创建密码:</label>
        <input type="password" name="psw" maxlength="8" placeholder="8位密码"><span style="color: red;">必填</span>
        <br>
        <label for="email">  注册邮箱:</label>
        <input type="text" name="email" placeholder="例如:wustzz@sina.com"><span style="color: red;">必填</span>
        <br>
        <label for="cap"> 验证码:</label>
        <input type="text" name="cap">
        <i class="gcode">s1few</i>
        <img src="images\arrow_03.png" alt="刷新" class="img1">
        <br>
        <label>性别:</label>
        <input type="radio" name="sex" value="male" checked="checked">男
        <input type="radio" name="sex" value="famale">女
        <br>
        <label>生日:</label>
        <input type="text" name="birth" placeholder="年/月/日">
        <br>
        <label>年龄:</label>
        <input type="text" name="age">
        <br>
        <label>籍贯:</label>
        <select name="province" size="1">
          <option value="湖北省">湖北省</option>
          <option value="湖南省">湖南省</option>
        </select>
        <select name="city" size="1">
          <option value="武汉">武汉</option>
          <option value="长沙">长沙</option>
        </select>
        <br>
        <label>个人学历:</label>
        <select name="stu" size="1">
          <option value="本科">本科</option>
          <option value="专科">专科</option>
        </select>
        <br>
        <label>月薪:</label>
        <input type="range" id="money" name="money" min="0" max="10000" step="1" value="5000">
        <span id="msg"></span>
        <script>
          var msg = document.getElementById("msg"); // 根据id值找到span元素 
          window.onload = function () { 
          msg.innerHTML = document.getElementById("money").value; // 获取区间域初始value值
          }
          document.getElementById("money").onchange = function () { 
          msg.innerHTML = this.value; // 将当前区间域的value作为span元素的内容
          }
          </script>
          <br>
        <label>个人爱好:</label>  
        <input type="checkbox" name="like" value="sing">唱歌
        <input type="checkbox" name="like" value="run">跑步
        <input type="checkbox" name="like" value="swim">游泳
        <br>
        <label>个人照片:</label>
        <input type="file" name="myfile" accept="image/*">
        <br>
        <label class="myintro">个人简介:</label>
        <textarea name="intro" cols="50" rows="10"></textarea>
        <br>
        <label></label>
        <input type="submit" value="提交" name="submit">
        <input type="reset"  value="重填" name="reset">
    </form>
</body>
</html>